<template>
    <div class="single-pic">
        <el-upload
  :action="uploadFileUrl"
   :before-upload="beforeUpload"
   :headers="Token"
  style="width: 100%;"
  list-type="picture-card"
  :on-preview="handlePictureCardPreview"
  :fileList="fileList"
  :on-remove="handleRemove"
  name="image"
  :on-change="handleChange">
  <i class="el-icon-plus"></i>
</el-upload>
<el-dialog :visible.sync="dialogVisible" append-to-body>
  <img width="100%" :src="dialogImageUrl">
</el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
    props: {
    id: {
      type: Number,
      default: 0,
    },
    file:{}
  },
    data() {
        return {
            dialogImageUrl: '',
            dialogVisible: false,
            fileList:[],
            baseUrl: process.env.VUE_APP_BASE_API,
            uploadFileUrl: process.env.VUE_APP_BASE_API + "/conf_page/uploadPic", // 上传文件服务器地址
            Token: {
               Token:getToken(),
            },
        }
    },
    methods: {
      beforeUpload(file) {
        const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg';
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG JPEG PNG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      singleShow(flag){
        if(flag&&document.getElementsByClassName("el-upload--picture-card")[this.id]){
            document.getElementsByClassName("el-upload--picture-card")[this.id].style.display='none'
        }
        else if(!flag&&document.getElementsByClassName("el-upload--picture-card")[this.id]){
        document.getElementsByClassName("el-upload--picture-card")[this.id].style.display='block'
        }
      },
      handleRemove(flie,fileList) {
       this.singleShow(fileList.length>0)
       this.fileList=fileList
      },
        handleChange(file, fileList){
        this.fileList=fileList
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    },
    watch: {
        fileList:{
        handler(newV,oldV){
         this.singleShow(newV.length>0)
         let imgArr=[]
      newV.forEach(ele=>{
          if(ele.response){
            imgArr.push(ele.response.data)
          }
          else{
            imgArr.push(ele.url)
          }
        }) 
        this.$emit('singlePic', imgArr,this.id);
        },
    },
    file:{
        handler(newV){
          this.fileList=[]
        if(newV.length>0){
          let obj={ url: newV[this.id]}
          this.fileList.push(obj)
        }
        },
        immediate:true
    },
    },
    mounted() {
      this.singleShow(this.fileList.length>0)        
    },
    created(){

    }
}
</script>
<style lang="scss" scoped>
    .single-pic{
        width: 50%;
        height: 230px;
        margin: 0 auto;
    }
    ::v-deep .el-upload--picture-card{
        width: 100% !important;
    }
    ::v-deep .el-upload-list--picture-card .el-upload-list__item{
        width: 100% !important;
    }

::v-deep .el-list-enter-active,
::v-deep .el-list-leave-active {
    transition: all 0s;
}

::v-deep .el-list-enter, .el-list-leave-active {
  opacity: 0;
  transform: translateY(0);
}
</style>